<script lang="ts" setup>
  import * as echarts from 'echarts'
  import { onMounted } from 'vue'
  // 折线图
  const myEchartBroken = () => {
    let mychart = echarts.init(document.getElementById("echartBroken") as HTMLElement, 'dark')
    mychart.setOption({
      backgroundColor: '#1d3043',
      color: ['#EE6666', '#73C0DE'],
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data: ['出境', '入境']
      },
      grid: {
          left: '5%',
          right: '10%',
          bottom: '10%',
          top: '15%',
          containLabel: true
      },
      xAxis: {
          type: 'category',
          name: '月份',
          boundaryGap: false,
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          name: '出境',
          data: [10, 50, 30, 100, 150, 300, 70, 30, 90, 100, 110, 120],
          type: 'line',
          smooth: true,
      },{
          name: '入境',
          data: [100, 130, 50, 150, 160, 70, 100, 90, 350, 110, 120, 300],
          type: 'line',
          smooth: true,
      }]
    })
  }
  onMounted(() => {
    myEchartBroken()
  })
</script>

<template>
  <div class="z-col home-broken z-flex-column">
    <div class="z-flex-justify-between z-flex-align-center box">
      <span class="z-t-bold">地府出入境人数</span>
    </div>
    <div class="home-broken-map z-flex-1">
      <div id="echartBroken" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .home-broken{
    height: 310px;
  }
</style>